<template>
  <div>
    <button @click="addScore">加分</button>
    <div id="chart" style="height: 400px;"></div>
  </div>
</template>

<script>
import * as echarts from 'echarts';

export default {
  data() {
    return {
      names: ['Alice', 'Bob', 'Charlie', 'David'],
      scores: [0, 0, 0, 0],
      chart: null
    };
  },
  mounted() {
    this.chart = echarts.init(document.getElementById('chart'));
    this.updateChart();
  },
  methods: {
    addScore() {
      const randomIndex = Math.floor(Math.random() * this.names.length);
      this.scores[randomIndex]++;
      this.updateChart();
    },
    updateChart() {
      const option = {
        xAxis: {
          type: 'category',
          data: this.names
        },
        yAxis: {
          type: 'value'
        },
        series: [{
          data: this.scores,
          type: 'bar'
        }]
      };
      this.chart.setOption(option);
    }
  }
};
</script>

<style>
#chart {
  width: 100%;
}
</style>